<template>
  <!-- 顶部状态栏组件，显示玩家基本信息和状态 -->
  <div class="top-status-bar">
    <!-- 玩家基本信息区域 -->
    <div class="player-info">
      <div class="name-level">
        <!-- 玩家姓名 -->
        <span class="player-name">{{ playerStore.basicInfo.name }}</span>
        <!-- 玩家等级 -->
        <span class="level">Lv.{{ playerStore.basicInfo.level }}</span>
      </div>
      <!-- 玩家境界 -->
      <span class="realm">{{ playerStore.fullRealm }}</span>
    </div>
    
    <!-- 状态统计容器 -->
    <div class="stats-container">
      <!-- 生命值状态条 -->
      <div class="stat-item hp">
        <div class="stat-bar">
          <div 
            class="stat-bar-fill" 
            :style="{ width: playerStore.progress.hp + '%' }"
          ></div>
        </div>
        <div class="stat-value">{{ playerStore.stats.hp }}/{{ playerStore.stats.maxHp }}</div>
      </div>
      
      <!-- 法力值状态条 -->
      <div class="stat-item mp">
        <div class="stat-bar">
          <div 
            class="stat-bar-fill" 
            :style="{ width: playerStore.progress.mp + '%' }"
          ></div>
        </div>
        <div class="stat-value">{{ playerStore.stats.mp }}/{{ playerStore.stats.maxMp }}</div>
      </div>
      
      <!-- 金币数量 -->
      <div class="stat-item gold">
        <div class="stat-value">💰{{ playerStore.basicInfo.gold }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入玩家状态管理store
import { usePlayerStore } from '../stores/player'

export default {
  name: 'TopStatusBar',
  setup() {
    // 使用玩家状态store
    const playerStore = usePlayerStore()
    
    return {
      playerStore
    }
  }
}
</script>

<style scoped>
/* 顶部状态栏样式 */
.top-status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, #2c3e50, #1a2530);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/* 玩家信息区域样式 */
.player-info {
  display: flex;
  flex-direction: column;
}

/* 姓名和等级容器样式 */
.name-level {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 玩家姓名样式 */
.player-name {
  font-size: 16px;
  font-weight: bold;
}

/* 等级标签样式 */
.level {
  font-size: 12px;
  background-color: #409eff;
  padding: 1px 5px;
  border-radius: 8px;
}

/* 境界信息样式 */
.realm {
  font-size: 12px;
  color: #409eff;
}

/* 状态统计容器样式 */
.stats-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 单个状态项样式 */
.stat-item {
  display: flex;
  flex-direction: column;
}

/* 状态条背景样式 */
.stat-bar {
  width: 60px;
  height: 6px;
  background-color: #333;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin-bottom: 2px;
}

/* 状态条填充样式 */
.stat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* 生命值状态条颜色 */
.hp .stat-bar-fill {
  background: linear-gradient(to right, #f56c6c, #ff9e9e);
}

/* 法力值状态条颜色 */
.mp .stat-bar-fill {
  background: linear-gradient(to right, #409eff, #8cc5ff);
}

/* 状态数值样式 */
.stat-value {
  font-size: 12px;
  text-align: left;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .top-status-bar {
    height: 45px;
    padding: 0 12px;
  }
  
  .player-name {
    font-size: 15px;
  }
  
  .level {
    font-size: 11px;
    padding: 1px 4px;
  }
  
  .realm {
    font-size: 11px;
  }
  
  .stats-container {
    gap: 12px;
  }
  
  .stat-bar {
    width: 50px;
    height: 5px;
  }
  
  .stat-value {
    font-size: 11px;
  }
}

@media screen and (max-width: 480px) {
  .top-status-bar {
    height: 40px;
    padding: 0 10px;
  }
  
  .name-level {
    gap: 4px;
  }
  
  .player-name {
    font-size: 14px;
  }
  
  .level {
    font-size: 10px;
    padding: 1px 3px;
  }
  
  .realm {
    font-size: 10px;
  }
  
  .stats-container {
    gap: 10px;
  }
}
</style>